import React,{Component} from 'react';
import style from './style.less';
import Header from './components/Header/index'
import { Avatar, Button, Menu, Dropdown, Modal, message } from "antd";

import {BorderBox12,BorderBox8,FullScreenContainer,BorderBox13,BorderBox1,BorderBox10 } from '@jiaminghi/data-view-react'
import TodayWring from "./components/Left/TodayWaring/index";
import AlarmTrebd from "./components/Right/AlarmTrebd/index";
import AlarmStatistics from "./components/Left/AlarmStatistics/index";
import LatestAlertList from "./components/Right/LatestAlertList/index";
import AlarmratioToday from "./components/Left/AlarmratioToday/index";
import Planinformation from "./components/Drop-downmenu/Planinformation";
import Operationlog from "./components/Drop-downmenu/Operationlog";
import ChangePassword from "./components/Drop-downmenu/ChangePassword";
import IconTable from "./components/Center/IconList/IconTable";
import Image1 from "@assets/admin.jpg";
import Warning from "./components/WaringSearch/index";
import CircleList from "./components/Center/Circle/CircleList";
// import Map from "../Board/components/Center/Map";
import { Link, withRouter } from "react-router-dom";
import * as actions from "./store/action";
import WebsocketComponent from "../Websocket/websocket";
import Mp3 from "../../assets/didi.mp3";
import Map from "../Board/components/Center/Map";

import { connect } from "react-redux";
class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible1: false, //告警信息查询
      visible2: false, //预案信息查询s
      visible3: false, //操作日志查询
      visible4: false, //修改密码
      visible5: false, //日志详情
      mapenlarge: true, //地图
      IconVisible: false, //小图标
      CircleVisible: false, //
      Wholepicture: false, //是否全图
      //看板
      Visable: false,
      

    };
  }
  componentDidMount() {
    // 获取所有告警信息和所有摄像机
    this.props.getAllData();

  }
  hide = () => {
    return {
      display: "none",
    };
  };
  clear = () => {
    localStorage.setItem("tabsKey", "");
    localStorage.setItem("tabsTitle", "");
  };
  change = () => {
    // let ss = this.state.Wholepicture;
    this.setState({
      Wholepicture: !this.state.Wholepicture,
    });
  };
  componentDidUpdate(prevProps) {
    // 典型用法（不要忘记比较 props）：
    if (prevProps.todayWarning.todayWarningTotal != undefined) {
      if (
        this.props.todayWarning.todayWarningTotal !=
        prevProps.todayWarning.todayWarningTotal
      ) {
        var myAuto = document.getElementById("audio");
        myAuto.play().catch((error) => {
          // 当播放异常时，走异常流程
          message.error("请点击页面任意处保证提示音正常");
        });
      }
    }
  }
    render(){
      console.log(this.state.Wholepicture)
      const menu = (
        <Menu
          onClick={handleMenuClick}
          style={{ backgroundColor: "rgb(2, 2, 44)" }}
        >
          <Menu.Item
            key="1"
            style={{ color: " white",backgroundColor: "rgb(2, 2, 44)"  }}
            onClick={() => {
              this.setState({ visible1: true });
            }}
          >
            告警信息查询
          </Menu.Item>
          <Menu.Item
            key="2"
            style={{ color: " white",backgroundColor: "rgb(2, 2, 44)"  }}
            onClick={() => {
              this.setState({ visible2: true });
            }}
          >
            预案信息查询
          </Menu.Item>
          <Menu.Item
            key="3"
            style={{ color: " white",backgroundColor: "rgb(2, 2, 44)"  }}
            onClick={() => {
              this.setState({ visible3: true });
            }}
          >
            操作日志查询
          </Menu.Item>
        </Menu>
      );
        return(
            <FullScreenContainer className={style.div_body}>
                <audio id="audio" src={Mp3}></audio>
                <WebsocketComponent id={"websocketboard"} />
              <div
                className={this.state.Wholepicture == true? style.hide : style.div_body_header}
              >
                <div className={style.div_body_header}>
                <BorderBox8 reverse="{true}">
                <Header
                    menu={menu}
                  />
                </BorderBox8>

                
                </div>
                <div className={style.div_body_connect}>
                    <div
                      className={this.state.Wholepicture == true ? style.hide : style.div_body_connect_left}
                    >
                      <div className={style.div_body_connect_left}>
                        <div className={style.div_body_connect_left_top}>
                          <BorderBox12>
                            <TodayWring regionProportion={this.props.regionProportion} />
                          </BorderBox12>
                        </div>
                        <div className={style.div_body_connect_left_bottom}>
                            <BorderBox12>
                               <AlarmTrebd monthWarning={this.props.monthWarning} />
                            </BorderBox12>
                        </div>
                      </div>
                    </div>
                    
                    <div
                      className={
                        this.state.Wholepicture == true ? style.Fullscreen : style.div_body_connect_middle
                      }
                    >
                      
                      <div className={style.div_body_connect_middle}>
                     
                        <div className={style.div_body_connect_middle_top}>
                          <AlarmratioToday todayWarning={this.props.todayWarning} />
                        </div>
                        <div className={style.div_body_connect_middle_bottom}>
                            <Map change={this.change} status={this.state.Wholepicture} />
                        </div>       
                      </div>
                      
                    </div>
                    <div
                      className={
                        this.state.Wholepicture == true? style.hide : style.div_body_connect_right
                      }
                    >
                    <div className={style.div_body_connect_right}>
                        <div className={style.div_body_connect_right_top}>
                            <BorderBox13 >
                                <LatestAlertList latestTenWarning={this.props.latestTenWarning} />
                            </BorderBox13>
                        </div>
                        <div className={style.div_body_connect_right_bottom}>
                            <BorderBox13>
                              <AlarmStatistics alarmStatistics={this.props.alarmStatistics} />
                            </BorderBox13>
                        </div>
                    </div>
                    </div>
                </div>
                
              </div>
               <Modal
                    title="告警信息查询"
                    visible={this.state.visible1}
                    centered
                    onCancel={() => {
                        this.setState({ visible1: false });
                    }}
                    onOk={() => {
                        this.setState({ visible1: false });
                    }}
                    footer={null}
                    getContainer={false}
                    width={1000}
                >
                    <Warning />
                </Modal>
                <Modal
                    title="预案信息列表"
                    visible={this.state.visible2}
                    centered={true}
                    onCancel={() => {
                        this.setState({ visible2: false });
                    }}
                    onOk={() => {
                        this.setState({ visible2: false });
                    }}
                    footer={null}
                    width={1000}
                    getContainer={false}
                    >
                    <Planinformation />
                </Modal>
                <Modal
                    title="操作日志查询"
                    visible={this.state.visible3}
                    centered
                    onCancel={() => {
                        this.setState({ visible3: false });
                    }}
                    onOk={() => {
                        this.setState({ visible3: false });
                    }}
                    footer={null}
                    width={1000}
                    getContainer={false}
                    >
                    <Operationlog />
                </Modal>
                
            </FullScreenContainer>

        )
    }
}
const mapStateToProps = (state) => ({
  //今日告警
  todayWarning: state.todayWarningConfig.todayWarning,
  //告警占比
  regionProportion: state.todayWarningConfig.regionProportion,
  //告警统计
  alarmStatistics: state.todayWarningConfig.alarmStatistics,
  //最近告
  latestTenWarning: state.todayWarningConfig.latestTenWarning,
  //告警趋势
  monthWarning: state.todayWarningConfig.monthWarning,
});
const mapDispatchToProps = (dispatch) => ({
  // 获取所有告警信息和所有摄像机
  getAllData() {
    dispatch(actions.getAllDataRequest());
  },
  logout() {
    dispatch(actions.logoutRequest());
  },
});
export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Index));
function handleMenuClick() {
  console.log("fsakdjfksad");
}

